import 'package:cloudapp/pages/base.dart';
import 'package:flutter/material.dart';

class ServersPage extends StatefulWidget {
  static const pageName = "/server/lists";

  @override
  State<StatefulWidget> createState() {
    return _ServersPage();
  }
}

class _ServersPage extends BaseState<ServersPage> {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    print('width: ${size.width}, height: ${size.height}');
    var spacing = 2.0;

    var width = (size.width - 3 * spacing ) / 4 ;
    var items = <CategoryInfo>[];
    items.add(CategoryInfo(
      dTime: "7月26日",
      location: "广东省, 广州市, 白云区, 桥南街1号",
      size: width,
      spacing: spacing,
      thumbs: 1,
    ));
    items.add(CategoryInfo(
      dTime: "7月23日",
      location: "广东省, 广州市, 天河区",
      size: width,
      spacing: 2.0,
      thumbs: 1,
    ));
    items.add(CategoryInfo(
      dTime: "7月21日",
      location: "广东省, 广州市, 天河区",
      size: width,
      spacing: 2.0,
      thumbs: 3,
    ));
    return Scaffold(
      appBar: AppBar(
        title: Text('服务器管理'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return PictureCategoryItem(info: items[index]);
        },
      ),
    );
  }
}

class CategoryInfo {
  final String dTime;
  final String location;
  final double size;
  final double spacing;
//  final List<Uint8List> thumbs;
  final int thumbs;

  CategoryInfo({
    @required this.dTime,
    @required this.location,
    @required this.size,
    @required this.spacing,
    @required this.thumbs,
  });
}

class PictureCategoryItem extends StatelessWidget {
  final CategoryInfo info;
  PictureCategoryItem({Key key, @required this.info}):super(key: key);

  @override
  Widget build(BuildContext context) {
    var images = <Widget>[];
    for(var i=0; i!=info.thumbs; i++) {
      images.add(
        Image.asset(
          'res/images/album.png',
          width: info.size,
          height: info.size,
        )
      );
    }
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.fromLTRB(15, 8, 0, 8),
            child: Row(
              children: <Widget>[
                Text(info.dTime),
                Text(
                  ' | ',
                  style: TextStyle(
                      color: Colors.grey[400]
                  ),
                ),
                Text(info.location),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(bottom: 5.0),
            child: Wrap(
              direction: Axis.horizontal,
              alignment: WrapAlignment.start,
              runAlignment: WrapAlignment.start,
              crossAxisAlignment: WrapCrossAlignment.start,
              textDirection: TextDirection.ltr,
              spacing: info.spacing,
              runSpacing: info.spacing,
              children: images,
            ),
          ),
        ],
      ),
    );
  }
}
